<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>



<style type="text/css">
    .demo{width:820px; margin:60px auto 10px auto}
    .m-sidebar{position: fixed;top: 0;right: 0;background: #000;z-index: 2000;width: 35px;height: 100%;font-size: 12px;color: #fff;}
    .cart{color: #fff;text-align:center;line-height: 20px;padding: 200px 0 0 0px;}
    .cart span{display:block;width:20px;margin:0 auto;}
    .cart i{width:35px;height:35px;display:block; background:url(car.png) no-repeat;}
    #msg{position:fixed; top:300px; right:35px; z-index:10000; width:1px; height:52px; line-height:52px; font-size:20px; text-align:center; color:#fff; background:#360; display:none}

    .box{float:left; width:198px; height:320px; margin-left:5px; border:1px solid #e0e0e0; text-align:center}
    .box p{line-height:20px; padding:4px 4px 10px 4px; text-align:left}
    .box:hover{border:1px solid #f90}
    .box h4{line-height:32px; font-size:14px; color:#f30;font-weight:500}
    .box h4 span{font-size:20px}
    .u-flyer{display: block;width: 50px;height: 50px;border-radius: 50px;position: fixed;z-index: 9999;}

    .button {
        display: inline-block;
        outline: none;
        cursor: pointer;
        text-align: center;
        text-decoration: none;
        font: 16px/100% 'Microsoft yahei',Arial, Helvetica, sans-serif;
        padding: .5em 2em .55em;
        text-shadow: 0 1px 1px rgba(0,0,0,.3);
        -webkit-border-radius: .5em;
        -moz-border-radius: .5em;
        border-radius: .5em;
        -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
        -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
        box-shadow: 0 1px 2px rgba(0,0,0,.2);
    }
    .button:hover {
        text-decoration: none;
    }
    .button:active {
        position: relative;
        top: 1px;
    }
    /* orange */
    .orange {
        color: #fef4e9;
        border: solid 1px #da7c0c;
        background: #f78d1d;
        background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20));
        background: -moz-linear-gradient(top,  #faa51a,  #f47a20);
        filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20');
    }
    .orange:hover {
        background: #f47c20;
        background: -webkit-gradient(linear, left top, left bottom, from(#f88e11), to(#f06015));
        background: -moz-linear-gradient(top,  #f88e11,  #f06015);
        filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f88e11', endColorstr='#f06015');
    }
    .orange:active {
        color: #fcd3a5;
        background: -webkit-gradient(linear, left top, left bottom, from(#f47a20), to(#faa51a));
        background: -moz-linear-gradient(top,  #f47a20,  #faa51a);
        filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f47a20', endColorstr='#faa51a');
    }
</style>


<script type="text/javascript" src="jquery-1.12.3.js"></script>
<script src="jquery.fly.min.js"></script>

<script>
    $(function() {


        //先导入jq
        //再导入自己的插件.js
        //如果有必要则导入css,图片

        //使用时, 导入.css, 使用.js中提供的方法
        var offset = $("#end").offset();  //结束的地方的元素
        $(".addcar").click(function(event){   //是$(".addcar")这个元素点击促发的 开始动画的位置就是这个元素的位置为起点
            var addcar = $(this);
            var img = addcar.parent().find('img').attr('src');
            var flyer = $('<img class="u-flyer" src="'+img+'">');


            //飞
            flyer.fly({
                //起点
                start: {
                    left: event.pageX,
                    top: event.pageY
                },
                //终点
                end: {
                    left: offset.left,
                    top: offset.top,
                    width: 0,
                    height: 0
                },
                //到达终点后调用的
                onEnd: function(){
                    console.log("到达终点");
                    $("#msg").show().animate({width: '250px'}, 200).fadeOut(1000);
                }
            });

        });



    });
</script>
</head>

<body>
<div id="main">
    <div class="demo">
        <div class="box">
            <img src="images/lg.jpg" class="img" width="180" height="180">
            <h4>¥<span>3499.00</span></h4>
            <p>LG 49LF5400-CA 49寸IPS硬屏富贵招财铜钱设计</p>
            <a href="#" class="button orange addcar">加入购物车</a>
        </div>
        <div class="box">
            <img src="images/hs.jpg" class="img" width="180" height="180">
            <h4>¥<span>3799.00</span></h4>
            <p>Hisense/海信 LED50T1A 海信电视官方旗舰店</p>
            <a href="#" class="button orange addcar">加入购物车</a>
        </div>
        <div class="box">
            <img src="images/cw.jpg" class="img" width="180" height="180">
            <h4>¥<span>¥3999.00</span></h4>
            <p>Skyworth/创维 50E8EUS 8核4Kj极清酷开系统智能液晶电视</p>
            <a href="#" class="button orange addcar">加入购物车</a>
        </div>
        <div class="box">
            <img src="images/ls.jpg" class="img" width="180" height="180">
            <h4>¥<span>6969.00</span></h4>
            <p>乐视TV Letv X60S 4核1080P高清3D安卓智能超级电视</p>
            <a href="#" class="button orange addcar">加入购物车</a>
        </div>
    </div>

</div>

<div class="m-sidebar">
    <div class="cart">
        <i id="end"></i>
        <span>购物车</span>
    </div>
</div>
<div id="msg">已成功加入购物车！</div>
</div>
</body>
</html>

</body>
</html>